<template>
  <div class="season" @click="handleScreenClick">
    <div class="art-text">
      <div class="title">第1赛季</div>
      <div class="subtitle">少侠当道</div>
    </div>
    <div class="continue-hint" v-if="showHint">点击屏幕继续</div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const route = useRoute()
const router = useRouter()
const type = route.query.type
const showHint = ref(false)

// 打印参数（仅在控制台，不在页面显示）
console.log('Season页面接收到的type参数:', type)
console.log('Season页面完整query参数:', route.query)

// 3秒后显示提示
onMounted(() => {
  setTimeout(() => {
    showHint.value = true
  }, 2500)
})

function handleScreenClick() {
  // 根据参数正常跳转
  if (type === '2v2custom') {
    router.push('/game-main2v2')
  }
}
</script>

<style scoped>
.season {
  width: 100%;
  height: 100vh;
  background-image: url('http://117.72.17.45:5500/data/bks/season.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.art-text {
  text-align: center;
  z-index: 10;
  position: relative;
}

.title {
  font-size: 4.5rem;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 
    3px 3px 0px #8b4513,
    6px 6px 0px #654321,
    9px 9px 0px #4a2c2a,
    12px 12px 20px rgba(0, 0, 0, 0.8);
  margin-bottom: 1rem;
  letter-spacing: 0.2em;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  transform: perspective(500px) rotateX(15deg);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

.subtitle {
  font-size: 3rem;
  font-weight: bold;
  color: #ff6b35;
  text-shadow: 
    2px 2px 0px #8b4513,
    4px 4px 0px #654321,
    6px 6px 0px #4a2c2a,
    8px 8px 15px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.15em;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  transform: perspective(500px) rotateX(15deg);
  animation: subtitleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% {
    text-shadow: 
      3px 3px 0px #8b4513,
      6px 6px 0px #654321,
      9px 9px 0px #4a2c2a,
      12px 12px 20px rgba(0, 0, 0, 0.8),
      0 0 20px #ffd700;
  }
  100% {
    text-shadow: 
      3px 3px 0px #8b4513,
      6px 6px 0px #654321,
      9px 9px 0px #4a2c2a,
      12px 12px 20px rgba(0, 0, 0, 0.8),
      0 0 40px #ffd700,
      0 0 60px #ffd700;
  }
}

@keyframes subtitleGlow {
  0% {
    text-shadow: 
      2px 2px 0px #8b4513,
      4px 4px 0px #654321,
      6px 6px 0px #4a2c2a,
      8px 8px 15px rgba(0, 0, 0, 0.8),
      0 0 15px #ff6b35;
  }
  100% {
    text-shadow: 
      2px 2px 0px #8b4513,
      4px 4px 0px #654321,
      6px 6px 0px #4a2c2a,
      8px 8px 15px rgba(0, 0, 0, 0.8),
      0 0 30px #ff6b35,
      0 0 45px #ff6b35;
  }
}

.continue-hint {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.8;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  animation: hintFade 2s ease-in-out infinite alternate;
  z-index: 20;
}

@keyframes hintFade {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
